<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.引出生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2 :style="obj">欢迎学习Vue！</h2>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false

			new Vue({
				el:'#demo',
				data:{
					obj:{
						opacity:1
					}
				},
				//挂载完毕（vm成功的解析了模板、渲染了页面，把一切初始的工作都做完了）
				mounted(){
					setInterval(() => {
						this.obj.opacity -= 0.01
						if(this.obj.opacity <= 0){
							this.obj.opacity = 1
						}
					},16);
				}
			})
			
		</script>
	</body>
</html>